<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>           
           *{
               margin: 0px;
               padding: 0px;
           }
            #playBack{
                position: absolute;
                z-index: -1;
                background-color: wheat;
                
            }
            audio{
                position: absolute;
                width: 300px;
                top:0px;
                left: 50%;
                margin-left: -200px;
            }
        </style>
        <script type="text/javascript" src="xPlay.js"></script>            
    </head>    
    <body>
        <audio id="audio" src="./12.mp3" controls="controls">你的浏览器不支持audio标签</audio>
        <canvas id="playBack">
    
        </canvas>
    </body>
    <script type="text/javascript"> 
        var context1;
        var player = new XYZ.Play();
        var game;
        try { 
            context1 = new (window.AudioContext || window.webkitAudioContext);
        } catch(e) { 
            throw new Error('The Web Audio API is unavailable');
        } 
        var analyserfa = context1.createAnalyser(); 
        var source = context1.createMediaElementSource(audio); 
        source.connect(analyserfa); 
        analyserfa.connect(context1.destination); 
        function run(){
            var array = new Uint8Array(128); 
            analyserfa.getByteFrequencyData(array);
            game.AudioArray = array;
            game.run();  
            requestAnimationFrame(run);
        }
        XYZ.OnLoad(function(){          
           player.init("playBack");
           game = new XYZ.Game("playBack");
           game.init();
           run();        
       });
       XYZ.OnWindowResize(function(e){
           player.setCanvasWH();
       });
    </script>
        
</html>